<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title th:text="${question.QTitle}"></title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="/editor/css/editormd.css"/>
    <link rel="stylesheet" href="/css/bootstrap.min.css"/>
    <link rel="stylesheet" href="/css/bootstrap-theme.min.css"/>
    <link rel="stylesheet" href="/css/community.css"/>
    <link rel="stylesheet" href="/editor/css/editormd.preview.css">
    <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
    <script src="/js/bootstrap.min.js" type="application/javascript"></script>
    <script src="/editor/lib/marked.min.js"></script>
    <script src="/editor/editormd.js"></script>
    <script src="/editor/lib/prettify.min.js"></script>
    <script src="/js/community.js"></script>

</head>
<body>
<div class="row container-fluid " >
    <!--        下面为问题输入框-->
    <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
<!--        标题-->
        <h1>
            <span th:text="${question.QTitle}"></span>
        </h1>
<!--        问题相关信息-->
        <span class="mun">
                发布时间：<span th:text="${question.QCreate}"></span>
                阅读数<span th:text="${question.QViewCount}"></span>
        </span>
<!--        作者信息-->
        <div class="media">
            <div class="media-left">
                <a href="#">
                    <img class="media-object" src="/img/ico1.png" alt="查看个人信息">
                </a>
            </div>
            <div class="media-body">
                <span class="text-desc" style="float: right">
                    <img src="/icos/私信.png" style="height: 16px;">
                    私信TA
                </span>
                <h4 class="media-heading" th:text="${question.QAuthor}"></h4>
                <span class="text-desc" style="float: right">
                    <img src="/icos/关注.png" style="height: 16px;">
                    关注TA
                </span>
                这是作者个人简介
            </div>
        </div><hr>
<!--        问题描述-->
        <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12" id="question-view">
            <textarea style="display:none;" th:text="${question.QDesc}"></textarea>
        </div>
        <script type="text/javascript">
            $(function () {
                editormd.markdownToHTML("question-view", {});
            });
        </script>
        <hr class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
<!--        标签-->
        <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
            <span th:each="tag:${question.QTags.split(',')}">
                <span class="glyphicon glyphicon-tags"></span>
                <span class="label label-default" th:text="${tag}"></span>
            </span>
        </div><hr class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
        <h3><span th:text="${question.QCommentCount}+'个回复数'"></span></h3>
<!--        警告框-->
        <div th:if="${msg!=null}" class="alert alert-warning alert-danger" role="alert">
            <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                <span aria-hidden="true">&times;</span>
            </button>
            <strong>Warning!</strong><span th:text="${msg}"></span>
        </div>
<!--        回复内容-->
        <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12" th:each="comment:${commentList}">
            <div class="media">
                <div class="media-left">
                    <a href="#">
                        <!--                        <img class="media-object img-circle" th:src="${question.user.avatarUrl}" >-->
                        <img class="media-object img-circle" src="/img/touxiang.jpg">
                    </a>
                </div>
                <div class="media-body">
                    <a th:href="@{#}">
                        <span class="glyphicon glyphicon-thumbs-up icon" th:text="${comment.CLike}"
                              style="float:right"></span>
                    </a>
                    <h4 class="media-heading" th:text="${comment.CAuthor}"></h4>
                    <h5 th:text="${comment.CText}"></h5>
                    <span class="glyphicon glyphicon-comment icon" aria-hidden="true"
                          th:data-id="${comment.CId}"
                          onclick="collapseComments(this)"
                          th:text="${'回复('+comment.CCount+')'}">
                    </span>
                    <span class="pull-right mun" th:text="${comment.getCCreate()}"></span>
                </div>
                <!--                二级评论-->
                <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 collapse" th:id="${'comment-'+comment.CId}"><br>
                    <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
                        <div class="media" th:each="secondComment:${comment.secondCommentList}">
                            <div class="media-left">
                                <a href="#">
                                    <!--                        <img class="media-object img-circle" th:src="${question.user.avatarUrl}" >-->
                                    <img class="media-object img-circle" src="/img/touxiang.jpg">
                                </a>
                            </div>
                            <div class="media-body">
                                <!--                                点赞数-->
                                <a th:href="@{#}">
                                    <span class="glyphicon glyphicon-thumbs-up icon" th:text="${comment.CLike}" style="float:right"></span>
                                </a>
                                <h4 class="media-heading" th:text="${secondComment.CAuthor}"></h4>
                                <h5 th:text="${secondComment.CText}"></h5>
                                <a class="a-delete" th:href="@{'/deleteComment/'+${question.QId}+'/'+${secondComment.CId}}">
                                    <span class="glyphicon glyphicon-remove icon" th:if="${user!=null && user.UUsername==comment.CAuthor}">删除</span>
                                </a>
                                <span class="pull-right mun" th:text="${comment.CCreate}"></span>
                            </div>
                            <br>
                        </div>
                        <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
                            <form method="get" th:action="${'/secondComment/'+question.QId+'?cType=2'}">
                                <input type="hidden" th:value="${comment.CId}" name="cCommentId">
                                <input type="text" class="form-control " th:placeholder="评论一下" name="cText">
                                <input class="btn btn-success comment-button pull-right" type="submit" th:value="回复" id="secondComment">
                            </form>
                        </div>
                    </div>
                </div>
            </div>
            <hr class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
        </div>
    </div>
</div>
<!--        回复问题-->
<div class="row">
    <form th:action="${'/firstComment/'+question.QId}+'?cType=1'">
        <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12" style="margin: 10px 20px">
            <div class="input-group">
                <input type="text" class="form-control" placeholder="说点啥吧？" name="cText">
                <span class="input-group-btn">
                    <button class="btn btn-default" type="submit">回复TA</button>
                </span>
            </div>
        </div>
    </form>
</div>
</body>
</html>